<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>分类存放数据</title>
  <script>
    //商品的构造函数
    function Item(name, pic, type, price) {
      this.name = name
      this.pic = pic
      this.type = type
      this.price = price
    }

    //初始化商品
    const item1 = new Item('iPhone 15', 'iphone15.jpg', '手机', 9999)
    const item2 = new Item('iPad Pro', 'ipad.jpg', '平板电脑', 9299)
    const item3 = new Item('Apple Watch Ultra 2', 'iWatch.jpg', '手表', 6499)
    const item4 = new Item('AirPods', 'AirPods.jpg', '耳机', 1399)
    const item5 = new Item('AirTag', 'AirTag.jpg', '周边配件', 249)
    const item6 = new Item('Apple Watch Series 9', 'Apple Watch Series 9.jpg', '手表', 2999)
    const item7 = new Item('MacBookPro', 'MacBookPro.jpg', '电脑', 15999)
    const item8 = new Item('Pro Display XDR', 'Pro Display XDR.jpg', '显示器', 39999)
    const item9 = new Item('iPhone SE', 'iPhone SE.jpg', '手机', 3499)
    const item10 = new Item('iMac', 'iMac.jpg', '电脑', 9999)

    //定义数组
    const items = [item1, item2, item3, item4, item5, item6, item7, item8, item9, item10]

    /*
      分类方式一: Map集合
     */
    const categoryMap = new Map()
    items.forEach(item => {
      //判断map中是否包含该类型
      if (categoryMap.has(item.type)) {
        categoryMap.get(item.type).push(item)
      } else {
        categoryMap.set(item.type, [item])
      }
    })
    console.log(categoryMap)
    //console.log(categoryMap.get('手机'))


    /* 分类方式二:  对象存储*/
    const categoryItems = {}

    items.forEach(item => {
      let type = item.type
      if (categoryItems[type] != undefined) {
        categoryItems[type].push(item)
      } else {
        categoryItems[type] = [item]
      }
    })
    console.log(categoryItems)

    //获取所有的手表
    console.log(categoryItems.手表)

    /*
      分类方式三:  二维数组

      二维数组是数组嵌套数组,即数组中的元素又是一个数组

      const arr = [[1,2,3], [7,8,9], [4,5,6]]
    */
    const categoryItems2 = []
    //获取所有类型的数组
    const categoryArr = []
    items.forEach(item => {
      let type = item.type
      if (!categoryArr.includes(type)) {
        categoryArr.push(type)
      }
    })
    //遍历类型数组,获取每一个类型
    categoryArr.forEach(type => {
      //根据类型过滤原始数据,得到这个类型所有商品的数组
      const typeArr = items.filter(item => item.type == type)
      //把这个同一类型商品的数组添加到最终结果数组中
      categoryItems2.push(typeArr)
    })
    console.log(categoryItems2)

    //获取所有手表对象的数组
    for (let i = 0; i < categoryItems2.length; i++) {
      const cateArr = categoryItems2[i]
      if (cateArr[0].type == '手表') {
        console.log(cateArr)
      }
    }
  </script>
</head>

<body></body>

</html>